<template>
	<div id="app">
		<div class="before-login" v-if="isNotLogin">
			<swiper :options="swiperOption" ref="mySwiper" class="swiper">
				<swiper-slide><div class="slider1 img0" :style="{backgroundImage:'url('+require('./assets/1.jpg')+')'}"></div></swiper-slide>
				<swiper-slide><div class="slider1 img1" :style="{backgroundImage:'url('+require('./assets/2.jpg')+')'}"></div></swiper-slide>
				<swiper-slide><div class="slider1 img2" :style="{backgroundImage:'url('+require('./assets/3.jpg')+')'}"></div></swiper-slide>
			</swiper>
			<h1>欢迎使用中小企业物资管理系统</h1>
			<!--登陆表单-->
			<Form ref="formInline" :model="formInline" :rules="ruleInline" class="login-form">
				<FormItem prop="user">
					<Input type="text" v-model="formInline.user" placeholder="请输入账号">
					<Icon type="ios-person-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<FormItem prop="password">
					<Input type="password" v-model="formInline.password" placeholder="请输入密码">
					<Icon type="ios-lock-outline" slot="prepend"></Icon>
					</Input>
				</FormItem>
				<FormItem prop="type">
					<Select v-model="formInline.type">
						<Option value="0">超级管理员</Option>
						<Option value="1">部门管理员</Option>
						<Option value="2">普通用户</Option>
					</Select>
				</FormItem>
				<FormItem>
					<div style="display: -webkit-flex;display: flex;justify-content: space-between;align-content: center;width: 60%;margin:0 auto;">
						<Button type="primary" @click="handleSubmit('formInline')" size="large">登陆</Button>
					</div>
				</FormItem>
			</Form>
		</div>
		<div class="after-login" v-if="!isNotLogin">
			<!--顶部-->
			<header>
				<h1>中小企业物资管理系统</h1>
				<span>
    			<Icon type="md-person" size="20" color="red"/>
    			Uncle同
    		</span>
			</header>
			<!--底部-->
			<div class="after-login-body">
				<!--左边div-->
				<div class="after-login-body-left">
					<!--管理员tab-->
					<tab @setWhitch="setShowWitchBox" @logout="logout" v-if="isManager==0"></tab>
					<manager-tab @setWhitch="setShowWitchBox" @logout="logout" v-if="isManager==1"></manager-tab>
					<user-tab @setWhitch="setShowWitchBox" @logout="logout" v-if="isManager==2"></user-tab>
				</div>
				<!--右边数据div-->
				<div class="after-login-body-right">
					<!--管理员tab对应的右边div-->
					<suplier-manager v-if="showWhitchBox=='1-1'"></suplier-manager>
					<store-house-manager v-if="showWhitchBox=='1-2'"></store-house-manager>
					<files-manager v-if="showWhitchBox=='1-3'"></files-manager>

					<roles-manager v-if="showWhitchBox=='2-1'"></roles-manager>
					<department-manager v-if="showWhitchBox=='2-2'"></department-manager>
					<permission-manager v-if="showWhitchBox=='2-3'"></permission-manager>

					<storage-manager v-if="showWhitchBox=='3-1'"></storage-manager>
					<out-manager v-if="showWhitchBox=='3-2'"></out-manager>
					<loss-manager v-if="showWhitchBox=='3-3'"></loss-manager>
					<move-manager v-if="showWhitchBox=='3-4'"></move-manager>

					<stock-list v-if="showWhitchBox=='4-1'"></stock-list>
					<storage-report v-if="showWhitchBox=='4-2'"></storage-report>
					<out-report v-if="showWhitchBox=='4-3'"></out-report>
					<suplier-report v-if="showWhitchBox=='4-4'"></suplier-report>
					<advice-report v-if="showWhitchBox=='4-5'"></advice-report>
					<!--用户tab对应的右边div-->
					<user-info v-if="showWhitchBox=='u-1-1'"></user-info>
					<file-advise v-if="showWhitchBox=='u-2-1'"></file-advise>
					<apply-history v-if="showWhitchBox=='u-2-2'"></apply-history>
				</div>
			</div>
		</div>

		<router-view/>
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	//1.导入所有组件
	import tab from './components/tab.vue'
	import managerTab from './components/managerTab.vue'
	import userTab from './components/userTab.vue'
	import suplierManager from './pages/one/suplierManager.vue'
	import storeHouseManager from './pages/one/storeHouseManager.vue'
	import filesManager from './pages/one/filesManager.vue'

	import rolesManager from './pages/two/rolesManager.vue'
	import departmentManager from './pages/two/departmentManager.vue'
	import permissionManager from './pages/two/permissionManager.vue'

	import storageManager from './pages/three/storageManager.vue'
	import outManager from './pages/three/outManager.vue'
	import lossManager from './pages/three/lossManager.vue'
	import moveManager from './pages/three/moveManager.vue'

	import stockList from './pages/four/stockList.vue'
	import storageReport from './pages/four/storageReport.vue'
	import outReport from './pages/four/outReport.vue'
	import suplierReport from './pages/four/suplierReport.vue'
	import adviceReport from './pages/four/adviceReport.vue'

	import userInfo from './pages/user/userInfo.vue'
	import fileAdvise from './pages/user/fileAdvise.vue'
	import applyHistory from './pages/user/applyHistory.vue'

	export default {
		name: 'App',
		//2.注册组件
		components: {
			swiper,
			swiperSlide,
			tab, //超级管理员的左边tab组件
			managerTab, //部门管理员的左边tab组件
			userTab, //普通用户的左边tab组件
			suplierManager, //one 右边 供应商面板
			storeHouseManager, //one 右边 仓库管理面板
			filesManager, //one 右边 物资信息面板
			rolesManager, //two 右边 角色面板
			departmentManager, //two 右边 部门管理面板
			permissionManager, //two 右边 权限管理面板
			storageManager, //three 右边 入库管理面板
			outManager, //three 右边 出库管理面板
			lossManager, //three 右边 盘损管理面板
			moveManager, //three 右边 移库管理面板
			stockList, //three 右边 库存清单面板
			storageReport, //four 右边 入库报表面板
			outReport, //four 右边 出库报表面板
			suplierReport, //four 右边 供应商报表面板
			adviceReport, //user 右边 报损报表面板
			userInfo, //user 右边 用户个人信息面板
			fileAdvise, //user 右边 物资报损面板
			applyHistory //user 右边 申请历史记录面板
		},
		data() { //定义用到的变量
			return {
				swiperOption:{
					autoplay:true
				},
				isManager: 1, //判断角色是否为管理员1 、部门管理员2、用户3
				isNotLogin: true, //判断是否未登录 false未登录显示登陆界面 true登陆 显示主页
				formInline: { //登录表单对象，账号、密码
					user: 'fqc',
					password: '123321',
					type: 1
				},
				ruleInline: { //表单校验规则
					user: [{
						required: true,
						message: '请输入正确账号',
						trigger: 'blur'
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							type: 'string',
							min: 6,
							message: '密码长度必须大于6位',
							trigger: 'blur'
						}
					],
					type: [{
						required: true,
						message: '请选择登陆类型',
						trigger: 'blur'
					}, ]
				},
				showWhitchBox: '1-1' //左边tab的编号，用来匹配显示右边对应的div
			}
		},
		methods: { //方法
			logout(value) { //登出
				this.isNotLogin = value
			},
			handleSubmit(name) { //点击登陆 进行表单验证
				this.$refs[name].validate((valid) => { //逐个遍历
					if(valid) { //如果每一个都遍历通过，满足条件 执行登陆方法
						this.login()
					} else { //否则提示验证失败
						this.$Message.error('请严肃填写登陆表单!');
					}
				})
			},
			setShowWitchBox(whitch) { //设置对应的tab编号
				this.showWhitchBox = whitch
			},
			login() {
				let that = this
				this.$axios({
					method: 'post',
					url: that.GLOBAL.url + '/sys/login',
					data: {
						username: that.formInline.user,
						password: that.formInline.password,
						userType: that.formInline.type
					},
					transformRequest: [function(data) {
						let ret = ''
						for(let it in data) {
							ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
						}
						return ret
					}],
					xhrFields: {
						widthCredentials: true
					},
					crossDomain: true,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					console.log(res)
					if(res.data.code == 200) {
						this.$Message.success(res.data.msg);
						this.isNotLogin = false
						this.isManager = res.data.userType
						let a = JSON.stringify(res.data)
						this.LS.setLS('userId', res.data.userId)
						this.LS.setLS("userInfo", a)
						this.LS.setLS('userType', res.data.userType)
					} else {
						this.$Message.error(res.data.msg);
					}
				}).catch(function(err) {
					console.log(err)
				})
			}
		},
	    computed: {
	    	//创建一个swiper对象
	      swiper() {
	        return this.$refs.mySwiper.swiper
	      }
	    },
		created() {
			let u = this.LS.getLS('userInfo')
			if(u) {
				this.isNotLogin = false
				let info = JSON.parse(u)
				this.isManager = info.userType
			}
		}
	}
</script>

<style scoped>
	.swiper{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	.slider1{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
	}
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: -moz-box;
		display: flex;
		height: 100%;
	}
	
	.before-login {
		position: absolute;
		left: 0;
		height: 0;
		width: 100%;
		height: 100%;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: -moz-box;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.login-form {
		background-color: rgba(255,255,255,.5);
		width: 450px;
		border: 1px solid lightgray;
		height: 300px;
		box-sizing: border-box;
		padding: 30px;
		border-radius: 15px;
	}
	
	.ivu-form-item {
		zoom: 1.2;
	}
	
	.after-login {
		position: absolute;
		left: 0;
		height: 0;
		width: 100%;
		height: 100%;
	}
	
	header {
		width: 100%;
		height: 80px;
		background-color: black;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: -moz-box;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		position: relative;
	}
	
	header span {
		position: absolute;
		top: 50%;
		left: 5%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
	}
	
	.after-login-body {
		height: -webkit-calc(100% - 80px);
		height: -moz-calc(100% - 80px);
		height: calc(100% - 80px);
		width: 100%;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: -moz-box;
		display: flex;
	}
	
	.after-login-body-left {
		height: 100%;
		width: 220px;
	}
	
	.after-login-body-right {
		width: -webkit-calc(100% - 220px);
		width: -moz-calc(100% - 220px);
		width: calc(100% - 220px);
		height: 100%;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: -moz-box;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 15px;
	}
</style>